<template>
  <div class="addOrEditModal">
    <el-dialog
      :title="row ? '编辑' : '新增'"
      :visible.sync="open"
      width="90%"
      :before-close="close"
    >
      <div class="main">
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          class="demo-ruleForm"
          :rules="rules"
        >
          <div class="box">
            <el-form-item label="表单名称" prop="name">
              <el-input
                v-model="form.name"
                clearable
                placeholder="请输入表单名称"
              />
            </el-form-item>
            <el-form-item label="表单标识" prop="code">
              <el-input
                v-model="form.code"
                clearable
                placeholder="请输入表单标识"
              />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input
                v-model="form.sort"
                clearable
                placeholder="请输入排序"
              />
            </el-form-item>
            <el-form-item label="ER模型" prop="erModel">
              <div @click="handleERModel">
                <el-input
                  v-model="form.erModel"
                  clearable
                  placeholder="请选择"
                  readonly
                />
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="选择ER模型"
      :visible.sync="settingTableOPen"
      width="90%"
      :before-close="() => (settingTableOPen = fasle)"
      border
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="当前应用" name="1"></el-tab-pane>
        <!-- <el-tab-pane label="公共应用" name="2">公共应用</el-tab-pane> -->
      </el-tabs>
      <div
        style="margin-bottom: 20px; display: flex; justify-content: flex-end"
      >
        <el-input
          placeholder="请输入关键字"
          v-model="queryParams.name"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            type="primary"
            style="background: #2f54eb"
            @click="getList"
          ></el-button>
        </el-input>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-if="activeName === '1'"
        v-loading="loading"
      >
        <el-table-column label=" " align="center" width="60">
          <template slot-scope="scope">
            <el-radio
              v-model="radio"
              :label="scope.$index"
              @change.native="getCurrentRow(scope.row)"
              >&nbsp;</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column prop="date" label="序号" width="80" align="center">
          <template slot-scope="scope">
            {{
              (queryParams.pageNum - 1) * queryParams.pageSize +
              (scope.$index + 1)
            }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="ER模型名称" align="center">
        </el-table-column>
        <el-table-column prop="mark" label="ER模型标识" align="center">
        </el-table-column>

        <el-table-column
          prop="modelStructure"
          label="ER模型结构"
          align="center"
          :formatter="
            (row) =>
              row.modelStructure
                ? selectDictLabel(
                    dict.type.pt_app_er_model_structure,
                    row.modelStructure
                  )
                : '--'
          "
        >
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="() => (settingTableOPen = fasle)">取 消</el-button>
        <el-button type="primary" @click="handleSubmitEr">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  appFormModel,
  listAppInfoDetail,
  appFormModelUpdate,
} from "@/api/app/electronicForms.js";
import { appErModelList } from "@/api/app/dataModel/erModel";
export default {
  name: "addOrEditModal",
  dicts: ["pt_app_er_model_structure"],
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    close: {
      type: Function,
      default: () => {},
    },
    row: {
      type: Object,
      default: () => {},
    },
    appId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {},
      queryParams: { tableName: undefined, pageNum: 1, pageSize: 10 },
      settingTableOPen: false,
      activeName: "1",
      loading: false,
      radio: undefined,
      chooseData: {},
      tableData: [],
      total: 0,
      rules: {
        name: [
          { required: true, message: "请输入表单名称", trigger: "blur" },
          {
            pattern: /^[^\s/\\]+$/,
            message: "表单名称不能包含斜线、空格",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "请输入表单标识", trigger: "blur" },
          {
            pattern: /^[^\s\u4e00-\u9fa5/\\]+$/,
            message: "表单标识不能包含汉字、斜线、空格",
            trigger: "blur",
          },
        ],
        erModel: [
          { required: true, message: "请选择ER模型", trigger: "change" },
        ],
      },
    };
  },

  async mounted() {
    if (this.row) {
      const res = await listAppInfoDetail(this.row.id);
      if (res.code == 200) {
        this.form = {
          code: res.data?.code,
          erModel: res.data?.erModel,
          formCode: res.data?.formCode,
          name: res.data?.name,
          sort: res.data?.sort,
        };
      }
    }
  },

  methods: {
    async getList() {
      this.loading = true;
      const res = await appErModelList({
        ...this.queryParams,
        appId: this.appId,
      });
      if (res.code == 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
      this.loading = false;
    },
    handleERModel() {
      this.settingTableOPen = true;
      this.getList();
    },
    handleSubmit() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let res = "";
          if (this.row) {
            res = await appFormModelUpdate({ ...this.form, appId: this.appId,id:this.row.id });
          } else {
            res = await appFormModel({ ...this.form, appId: this.appId });
          }
          if (res.code == 200) {
            this.$message.success(this.row ? "编辑成功" :"新增成功");
            this.close();
          }
        }
      });
    },
    handleSubmitEr() {
      if (!Object.keys(this.chooseData).length) {
        return this.$message.error("请选择ER模型");
      }
      this.form.erModel = this.chooseData.name;
      this.form.erMark = this.chooseData.mark;
      this.form.formCode = this.chooseData.formCode;
      this.settingTableOPen = false;
    },
    getCurrentRow(key) {
      this.chooseData = key;
    },
  },
};
</script>

<style lang="scss" scoped>
.addOrEditModal {
  .box {
    width: 100%;
    display: grid;
    // grid-template-rows: 50% 50%;
    grid-template-columns: 1fr 1fr;
    // grid-template-rows: auto auto;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    justify-items: stretch;
    align-items: start;
  }
  ::v-deep .el-radio__label {
    display: none;
  }
  ::v-deep .input-with-select {
    width: 300px;
  }
  ::v-deep .el-icon-search {
    color: #fff;
  }
   ::v-deep .importJson {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}
</style>